リンク文字の色を変更する
今週は、ホームページ作成の初心者を対象にホームページの基本を紹介します。テーマは「リンク文字の色を変更する方法」です。リンクが張られている文字は、通常、青色の文字で表示されますが、これを別の色に変更することも可能です。

→ リンク文字の色を変更する
 
リンク文字の色を変更する場合は、「BODY」タグにlink属性を追加し、文字色を指定します。色の指定方法は、RGBの16進数表記でも構いませんし、色の名前で指定することもできます。たとえば、「link="#FF0000"」と指定すると、リンク文字の色は赤色になります。
<HTML>

<HEAD>
<TITLE>初めてのホームページ作成</TITLE>
</HEAD>

<BODY link="#FF0000">
<A href="http://www.infoseek.co.jp/">インフォシーク</A><BR>
<A href="http://www.rakuten.co.jp/">楽天</A><BR>
</BODY>

</HTML>


→ 参照済みリンクの色を変更する
 
リンク文字の色は、まだ参照していないリンク先と、すでに参照済みのリンク先で色が異なる仕組みになっています。初期設定におけるリンク文字の色は、未参照が青色、参照済みが紫色です。つまり、先ほどの設定は未参照のリンク文字の色を変更する設定となるわけです。参照済みのリンク文字の色も変更する場合は、「BODY」タグにvlink属性を追加し、色を指定します。また、リンクをクリックしたときの文字の色も指定可能です。クリックしたときの文字の色はalink属性で指定します。
<HTML>

<HEAD>
<TITLE>初めてのホームページ作成</TITLE>
</HEAD>

<BODY link="#FF0000" vlink="#000000" alink="#0000FF">
このページでは、未参照リンクを「赤色」、参照済みリンクを「黒色」で表示しています。<BR>
また、リンクをクリックすると、文字の色が「青色」になります。<BR>
<BR>
◆リンク<BR>
<A href="http://www.infoseek.co.jp/">インフォシーク</A><BR>
<A href="http://www.rakuten.co.jp/">楽天</A><BR>
</BODY>

</HTML>


→ リンクに下線を表示させない方法
 
リンク文字には下線が引かれているのが普通ですが、この下線を非表示にすることも可能です。ただし、これにはスタイルシートという言語を使用する必要があります。初心者の方には少し難しいかもしれませんが、一応紹介しておきましょう。スタイルシートは「STYLE type="text/css"」〜「/STYLE」タグ内に記述する決まりになっており、リンク文字の下線を非表示にする記述は「A{text-decoration: none;}」となります。以下に、そのサンプルを示しておくので参考としてください。なお、サンプルの「STYLE type="text/css"」〜「/STYLE」部分を自分のホームページの「HEAD」と「BODY」の間にコピーすると、リンク文字の下線を非表示にできます。
<HTML>
<HEAD>
<STYLE type="text/css">
<!--
A{text-decoration: none;}
-->
</STYLE>

<BODY link="#FF0000" vlink="#000000" alink="#0000FF">
このページでは、未参照リンクを「赤色」、参照済みリンクを「黒色」で表示しています。<BR>
また、リンクをクリックすると、文字の色が「青色」になります。<BR>
<BR>
◆リンク<BR>
<A href="http://www.infoseek.co.jp/">インフォシーク</A><BR>
<A href="http://www.rakuten.co.jp/">楽天</A><BR>
</BODY>

</HTML>


G|Cg|C@Amazon Yahoo yV

z[y[W yVoC[UNLIMIT1~] COiq COsI